<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--模糊查询开始-->
        <div class="filter-container">
            <el-input placeholder="图书名称" v-model="bname" style="width: 200px;" class="filter-item"></el-input>
            <el-button @click="selectByWhere()" class="dalfBut">查询</el-button>
            <!--新增按钮  点击新增按钮，打开一个新增的界面-->
            <el-button type="primary" @click="createAdd()">新增</el-button>
        </div>
        <!--模糊查询结束-->
        <!--中间部分  开始-->
        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="图书编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="图书类型"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="图书名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="description"
                        label="图书描述">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="createUpdate(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="deleteBook(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!--中间部分  结束-->
        <!--分页 开始-->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="50">
            </el-pagination>
        </div>
        <!--分页 结束-->
        <!-- 新增标签弹层 开始 -->
        <div class="add-form">
            <el-dialog title="新增图书" :visible.sync="dialogAddFormVisible">
                <el-form ref="dataAddForm" :model="addBook"  label-position="right" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="图书类别" prop="type">
                                <el-input v-model="addBook.type"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="图书名称" prop="name">
                                <el-input v-model="addBook.name"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="描述">
                                <el-input v-model="addBook.description" type="textarea"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogAddFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="doAdd()">确定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 新增标签弹层 结束 -->

        <!-- 修改标签弹层 开始 -->
        <div class="update-form">
            <el-dialog title="新增图书" :visible.sync="dialogUpdateFormVisible">
                <el-form ref="dataAddForm" :model="updateBook"  label-position="right" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="图书类别" prop="type">
                                <el-input v-model="updateBook.type"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="图书名称" prop="name">
                                <el-input v-model="updateBook.name"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="描述">
                                <el-input v-model="updateBook.description" type="textarea"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogUpdateFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="doUpdate()">确定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 修改标签弹层 结束 -->
    </div>



<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js" ></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"/>
<script>
    new Vue({
        el:"#app",
        mounted(){//页面加载触发的事件
           this.selectAll();
        },
        data(){
            return{
                currentPage:1,
                pageSize: 5,
                bname:'',//模糊查询的值
                tableData: [],//查询后绑定的表格数据
                addBook:{},//新增的数据
                updateBook:{},//修改的数据
                dialogAddFormVisible:false,//新增弹框的属性值 默认是关闭
                dialogUpdateFormVisible:false//修改弹框的属性值 默认是关闭
            }
        },
        methods:{
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.selectByWhere();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage=val;
                //查询
                this.selectByWhere();
            },
            //查询所有的方法
            selectAll(){
                var _this=this;
                axios.get("/books").then(function (resp){
                    //console.log(resp);
                    console.log(resp.data.data);
                    _this.tableData=resp.data.data;
                }).catch(function (){
                    alert("访问有误，请联系管理员！！！");
                })
            },
            //删除书籍信息的方法
            deleteBook(row){
                //console.log(row);
                var _this=this;
                //执行删除的操作
                axios.delete("/books/"+row.id).then(function (resp){
                    //console.log(resp.data);
                    if(resp.data.code==20021){
                        _this.$message.success("删除成功");
                        //调用查询所有的方法
                        _this.selectAll();
                    }else{
                        _this.$message.success("删除失败");
                    }
                }).catch(function (){
                    alert("访问有误！！！");
                });
            },
            //打开新增界面
            createAdd(){
                //将新增弹框的属性值变为true
                this.dialogAddFormVisible=true;
            },
            //打开修改界面
            createUpdate(row){
                //console.log(row);
                //将修改弹框的属性值变为true
                this.dialogUpdateFormVisible=true;
                var _this=this;
                axios.get("/books/"+row.id).then(function (resp){
                    //根据选中行的id,查询相应的数据，并赋值给修改框的文本值
                    _this.updateBook=resp.data.data;
                }).catch(function (){
                    alert("有异常！");
                });
                //将选中行的数据赋值给修改弹框中文本框 有 bug
                //this.updateBook=row;
            },
            //处理新增的操作
            doAdd(){
                var _this=this;
                axios.post("/books",this.addBook).then(function (resp){
                    if(resp.data.code==20011){
                        _this.$message.success("新增成功");
                        //关闭当前的窗口
                        _this.dialogAddFormVisible=false;
                        //调用查询所有的方法
                        _this.selectAll();
                    }else{
                        _this.$message.success("新增失败");
                    }
                }).catch(function (){
                    alert("有异常！！！");
                });
            },
            //处理修改的操作
            doUpdate(){
                var _this=this;
                axios.put("/books",this.updateBook).then(function (resp){
                    if(resp.data.code==20031){
                        _this.$message.success("修改成功");
                        //关闭当前的窗口
                        _this.dialogUpdateFormVisible=false;
                        //调用查询所有的方法
                        _this.selectAll();
                    }else{
                        _this.$message.success("修改失败");
                    }
                }).catch(function (){
                    alert("有异常！！！");
                });
            },
            //模糊查询调用的方法
            selectByWhere(){
                var _this=this;
               var obj={
                   name:this.bname,
                   currentPage:this.currentPage,
                   pageSize:this.pageSize
               };
                axios.get("/books/selectByName", {params:obj}).then(function (resp){
                    //console.log(resp);
                    console.log(resp.data.data);
                    _this.tableData=resp.data.data;
                }).catch(function (){
                    alert("有异常！");
                })
            }
        }
    })
</script>
</body>
</html>